<template>
       <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>

        <router-link to="/LineList">线路管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>线路显示</el-breadcrumb-item>
 </el-breadcrumb></div>
    <!-- 查询 -->

     <el-form :inline="true" :model="forms" class="demo-form-inline">
    <el-form-item label="线路名称：">
      <el-input v-model="forms.LineName" placeholder="请输入线路名称" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="起点：">
      <el-input v-model="forms.StartingPoint" placeholder="请输入起点" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="终点：">
      <el-input v-model="forms.Ends" placeholder="请输入终点" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="是否是外协：">
      <el-select
        v-model="forms.OutsourcedUnitsIsno"
        placeholder="请选择是否是外协"
        clearable
        style="width: 180px;"
      >
        <el-option label="是" value="是" />
        <el-option label="否" value="否" />
      </el-select>
    </el-form-item>
    <el-form-item label="货主手机号：">
      <el-input v-model="forms.CargoOwnerPhone" placeholder="请输入货主手机号" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item label="货主单位名称：">
      <el-input v-model="forms.CargoOwnerUnitName" placeholder="请输入货主单位名称" clearable style="width: 150px;"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getListLine" >查询</el-button>
          <el-button type="primary" @click="reset()" >重置</el-button>
    </el-form-item>
  </el-form> 
  <!-- 显示列表 -->
       <el-button type="primary" @click="CreateLine" >新增</el-button>
           <el-button type="danger" @click="getDelAllLine" >删除</el-button>
              <el-button type="success" @click="getExport" >导出</el-button>
     <el-table :data="ListLine" border style="width: 100%" ref="multipleTableRef"  @selection-change="handleSelectionChange">
       <el-table-column type="selection"  width="55" />
        <el-table-column prop="lineName" label="线路名称" align="center" />
     <el-table-column prop="date" label="起点" align="center" >
        <template v-slot="scoped">
<span>{{ scoped.row.startingProvince }}
    {{ scoped.row.startingCity }}
    {{ scoped.row.startingCounty }}
    {{ scoped.row.startingPointAddress }}
</span>
        </template>
     </el-table-column>
      <el-table-column prop="date" label="终点" align="center" >
        <template v-slot="scoped">
<span>{{ scoped.row.endProvince }}
    {{ scoped.row.endCity }}
    {{ scoped.row.endCounty }}
    {{ scoped.row.endAddress }}
</span>
        </template>
      </el-table-column>
       <el-table-column prop="outsourcedUnitsIsno" label="是否是外协" align="center" >
         <template v-slot="scope">
<span v-if="scope.row.outsourcedUnitsIsno == false">否</span>
<span v-if="scope.row.outsourcedUnitsIsno == true">是</span>
    </template>
       </el-table-column>
        <el-table-column prop="cargoOwnerName" label="货主姓名" align="center" />
         <el-table-column prop="cargoOwnerPhone" label="货主手机号" align="center" />
          <el-table-column prop="cargoOwnerUnitName" label="货主单位" align="center" />
           <el-table-column prop="lineNotes" label="备注" align="center" >
             <template v-slot="scope">
              <span v-if="scope.row.lineNotes==''">-</span>
              <span v-else>{{ scope.row.lineNotes }}</span>
             </template>
           </el-table-column>
            <el-table-column prop="createdDate" label="创建时间" align="center" >
                 <template v-slot="scope">
<span>{{ scope.row.createdDate.replace("T"," ").substring(0,19) }}</span>
    </template>
            </el-table-column>
             <el-table-column prop="lineStatus" label="状态" align="center" >
                 <template v-slot="scope">
<el-switch v-model="scope.row.lineStatus" />
    </template>
             </el-table-column>
             <el-table-column prop="date" label="操作" align="center">
  <template v-slot="scope">
    <!-- 编辑操作 -->
    <div class="table-operation" >
      <el-icon class="operation-icon"><EditPen /></el-icon>
      <span class="operation-text"  @click="edit(scope.row.lineID)">编辑</span>
    </div>
 
    <!-- 删除操作 -->
    <div  class="table-operation" style="margin-top: 8px;">
      <el-icon class="operation-icon"><CloseBold /></el-icon>
      <span class="operation-text" @click="del(scope.row.lineID)">删除</span>
    </div>
 
    <!-- 查看操作 -->
    <div class="table-operation" style="margin-top: 8px;" >
      <el-icon class="operation-icon"><CircleCheck /></el-icon>
      <span class="operation-text" @click="ed(scope.row.lineID)">查看</span>
    </div>
  </template>
  
</el-table-column>
            
  </el-table>
  <div class="demo-pagination-block">

    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PageSize"
      :page-sizes="[3, 6, 9, 11]"
        style="float: right;"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
//根据菜单id查询按钮功能权限
const form:any = reactive({
  buttonArray:[]
})
const getRoleMenuFun=()=>{
  axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
    params: {
      menuId:route.query.id
    }
  }).then(res=>{
    console.log(res);
    form.buttonArray=res.data.data
  }).catch(err=>{
    console.log(err);
    
  })    
}
//分页
const handleSizeChange = (val: number) => {
    page.PageSize = val
  getListLine()
}
const handleCurrentChange = (val: number) => {
    page.PageIndex = val  
  getListLine()
}
//图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
    Star,
    CloseBold,
    EditPen,
  CircleCheck
} from '@element-plus/icons-vue'
//多选
const multipleSelection = ref([])
const multipleSelections = ref([])//接收整条数据
const handleSelectionChange = (val: any) => {
  multipleSelection.value = (val.map(d => d.lineID))
    multipleSelections.value = val
   console.log(multipleSelection.value) //多选的id
  
}

//组件
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
//变量
const forms=reactive({
    LineName: "",
    StartingPoint: "",
    Ends: "",
    OutsourcedUnitsIsno:"",
    CargoOwnerPhone: "",
    CargoOwnerUnitName: "",
    
})
//分页
const page=reactive({
    PageIndex: 1,
    PageSize: 3,
    pageCount: 0,
    totalCount:0
})

//方法
const ListLine: any = ref([])
const getListLine = () => {
    axios.get("/bread/api/Lines/GetLinesAll", {
        params: {
            LineName: forms.LineName,
            StartingPoint: forms.StartingPoint,
            Ends: forms.Ends,
            OutsourcedUnitsIsno: forms.OutsourcedUnitsIsno,
            CargoOwnerPhone: forms.CargoOwnerPhone,
            CargoOwnerUnitName: forms.CargoOwnerUnitName,
            PageIndex: page.PageIndex,
            PageSize:page.PageSize,
        }
    }).then(ter => {
        ListLine.value = ter.data.data.list
     console.log(ter.data)
        page.pageCount = ter.data.data.pageCount
        page.totalCount = ter.data.data.totalCount
      
    
    }).catch(err => {
        console.log(err);
    })
}
//导出
import * as XLSX from 'xlsx';// 导出Excel
const getExport = () => {
  // let url = '/bread/api/CargoOwners/GetExcelName?CargoOwnerName='+forms.CargoOwnerName+'&CargoOwnerPhone='+forms.CargoOwnerPhone+'&DriverLicenseDate='+forms.DriverLicenseDate+'&PageIndex='+page.PageIndex+'&PageSize='+page.PageSize
  // window.location.href = url;

   
    ElMessageBox.confirm("是否确认导出当前选择的数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
    .then((response) => {
        //  this.selectdata 是复选框的 数据列表
        if (multipleSelections.value.length <= 0) {
            ElMessage.warning('请选择数据！');
            return;
        }
        let tableData = [
            ['序号','线路名称','起点', '终点', '是否是外协', '货主姓名', "货主手机号", "货主单位","备注","创建时间"]//导出表头
        ] // 表格表头
        multipleSelections.value.forEach((item, index) => {
            let rowData= []
            //导出内容的字段
            rowData = [
                index + 1, 
                item.lineName,
                item.startingProvince+item.startingCity+item.startingCounty+item.startingPointAddress,
                item.endProvince+item.endCity+item.endCounty+item.endAddress,
                item.outsourcedUnitsIsno==true?"是":"否",
                item.cargoOwnerName,
                item.cargoOwnerPhone,
              item.cargoOwnerUnitName,
                item.lineNotes,
                item.createdDate,
            ]
            tableData.push(rowData)
        })
        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
        let bookNew = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名称') // 工作簿名称
        let name = '线路信息表' + timeFormat() + '.xlsx'
        XLSX.writeFile(bookNew, name) // 保存的文件名
    })
}
const timeFormat=()=> {
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        let hours = time.getHours();
        let minutes = time.getMinutes();
        let seconds = time.getSeconds();
        return year + '-' + addZero(month) + '-' + addZero(date) + ' ' + addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);
}
const addZero=(num:any)=> {
    return num < 10 ? '0' + num : num
}
//删除（单删）
import { ElMessage, ElMessageBox } from 'element-plus'
const del = (id:number) => {
     ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
        axios.post("/bwrite/api/Line/DeleteLine?LineId="+id).then(ter => {
            if (ter.data.code>0) {
                ElMessage.success('删除成功')
            getListLine()
            }
            else {
            ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
    
    })
}
//新增线路跳转
const CreateLine = () => {
    router.push("/AddLine")
}
//删除（多删）
const getDelAllLine = () => {
    if (multipleSelection.value.length == 0) { 
        ElMessage.error('请选择要删除的线路')
        return
    }
      ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
          .then(() => {

              axios.post("/bwrite/api/Line/DeleteAllLine", {
            lineids:multipleSelection.value
        }).then(ter => {
            if (ter.data.code>0) {
                ElMessage.success('删除成功')
                 getListLine()
            }
            else {
            ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
    
    })
}
//修改线路
const edit = (id:number) => {
    router.push({
        path: "/UpdateLine",
        query: {
            id:id
        }
    })
}
//查看线路
const ed = (id:number) => {
    router.push({
        path: "/ShowLine",
        query: {
            id:id
        }
    })
}
//重置查询条件
const reset = () => {
     forms.LineName="",
     forms.StartingPoint="",
     forms.Ends="",
     forms.OutsourcedUnitsIsno="",
     forms.CargoOwnerPhone="",
     forms.CargoOwnerUnitName=""
    getListLine()
}
//钩子函数
onMounted(() => {
  getListLine()
    getRoleMenuFun()
})
</script>
<style scoped>
.table-operation {
  display: flex;
  align-items: center;
}
 
.operation-icon {
  color: blue;
  margin-right: 8px; /* 图标和文本之间的间距 */
}
 
.operation-text {
  color: blue;
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
}
</style>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
